<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: green;
            padding: 30px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>

<!--
    事件修饰符使用
    1. 键盘事件修饰符
       .enter
       .delete
       .up
       .left
       .right
       .down
       .space
    2. 鼠标事件修饰符
        .prevent 阻止默认行为
        .once   一次有效
        .stop  阻止事件冒泡
            1. 事件捕获   从外向内
            2. 事件执行
            3. 事件冒泡  从内向外
         .self  只监听自己的事件触发 冒泡事件无效

-->
<div id="app">
    <p><input type="text" @keydown.enter="showMessage"></p>
    <p><a href="http://www.baidu.com" @click.prevent="printInfo">baidu</a></p>
    <p>
        <button @click.once="one">一次事件</button>
    </p>
    <div id="box" @click.self="boxFn">
        <button id="btn" @click="btnFn">事件冒泡</button>
    </div>
</div>


<script>
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            showMessage() {
                console.log('按键被按下')
            },
            printInfo() {
                console.log('单击事件')
            },
            one() {
                console.log('一次事件')
            },
            boxFn(){
                console.log('box被点击了')
            },
            btnFn(){
                console.log('btn被点击了')
            }
        }
    })
</script>
</body>
</html>
